<template>
  <div class="portfolio-container">
    <div class="portfolio-header">
      <h1>我们的作品</h1>
      <p>用光影讲述故事，用镜头记录时代</p>
    </div>

    <div class="portfolio-content">
      <el-tabs v-model="activeTab" class="portfolio-tabs">
        <el-tab-pane label="全部作品" name="all">
          <el-row :gutter="30">
            <el-col
                v-for="(item, index) in filteredPortfolio"
                :key="index"
                :xs="24" :sm="12" :md="8" :lg="6"
            >
              <div class="portfolio-item" @click="handlePreview(item)">
                <div class="portfolio-image">
                  <img :src="item.poster" :alt="item.title" />
                  <div class="portfolio-overlay">
                    <el-icon :size="40"><VideoPlay /></el-icon>
                  </div>
                </div>
                <div class="portfolio-info">
                  <h3>{{ item.title }}</h3>
                  <div class="portfolio-meta">
                    <span>{{ item.year }}</span>
                    <el-tag
                        v-for="(tag, i) in item.tags"
                        :key="i"
                        :type="tagTypes[i % tagTypes.length]"
                        size="small"
                    >
                      {{ tag }}
                    </el-tag>
                  </div>
                  <p class="portfolio-desc">{{ truncateDescription(item.description) }}</p>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="电影" name="movie"></el-tab-pane>
        <el-tab-pane label="电视剧" name="tv"></el-tab-pane>
        <el-tab-pane label="综艺" name="variety"></el-tab-pane>
      </el-tabs>

      <div class="portfolio-pagination">
        <el-pagination
            background
            layout="prev, pager, next"
            :total="100"
            :page-size="12"
            @current-change="handlePageChange"
        />
      </div>
    </div>

    <!-- 作品预览对话框 -->
    <el-dialog v-model="previewVisible" :title="currentItem?.title" width="70%">
      <div class="preview-content">
        <div class="preview-video">
          <video controls :poster="currentItem?.poster" style="width:100%">
            <source :src="currentItem?.trailer" type="video/mp4">
          </video>
        </div>
        <div class="preview-info">
          <h3>{{ currentItem?.title }}</h3>
          <p><strong>上映时间：</strong>{{ currentItem?.year }}</p>
          <p><strong>导演：</strong>{{ currentItem?.director }}</p>
          <p><strong>主演：</strong>{{ currentItem?.actors.join(' / ') }}</p>
          <p><strong>简介：</strong>{{ currentItem?.description }}</p>
          <div class="preview-tags">
            <el-tag
                v-for="(tag, i) in currentItem?.tags"
                :key="i"
                :type="tagTypes[i % tagTypes.length]"
            >
              {{ tag }}
            </el-tag>
          </div>
        </div>
      </div>
      <template #footer>
        <el-button @click="previewVisible = false">关闭</el-button>
        <el-button type="primary" @click="handleContact">商务合作</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { VideoPlay } from '@element-plus/icons-vue'

const activeTab = ref('all')
const currentPage = ref(1)
const previewVisible = ref(false)
const currentItem = ref(null)

const tagTypes = ['', 'success', 'info', 'warning', 'danger']

// 模拟作品数据
const portfolioData = ref([
  {
    id: 1,
    title: '芸汐传',
    year: '2018',
    type: 'tv',
    poster: 'https://image.baidu.com/search/down?url=https://tva1.sinaimg.cn/large/006y8lValy1h2e5q1qk8xj30u0160q7t.jpg',
    trailer: 'https://example.com/trailer1.mp4',
    director: '鞠婧祎',
    actors: ['鞠婧祎', '张哲瀚', '米热'],
    tags: ['古装', '爱情', '宫廷'],
    description: '该剧讲述了太医之女韩芸汐在经历了种种磨难后依旧保持积极乐观心态，并与秦王龙非夜产生了错综复杂情感的故事。'
  },
  {
    id: 2,
    title: '新白娘子传奇',
    year: '2019',
    type: 'tv',
    poster: 'https://image.baidu.com/search/down?url=https://tva1.sinaimg.cn/large/0073tLPGly1h2e5q3j3b1j30u0160n1x.jpg',
    trailer: 'https://example.com/trailer2.mp4',
    director: '鞠婧祎',
    actors: ['鞠婧祎', '于朦胧', '肖燕'],
    tags: ['神话', '爱情', '奇幻'],
    description: '该剧根据1992年版同名电视剧改编，讲述了白素贞与许仙之间的千年纠葛情缘的故事。'
  },
  // 更多作品数据...
])

const filteredPortfolio = computed(() => {
  if (activeTab.value === 'all') {
    return portfolioData.value
  }
  return portfolioData.value.filter(item => item.type === activeTab.value)
})

const truncateDescription = (text) => {
  return text.length > 50 ? text.substring(0, 50) + '...' : text
}

const handlePreview = (item) => {
  currentItem.value = item
  previewVisible.value = true
}

const handlePageChange = (page) => {
  currentPage.value = page
  // 这里可以添加获取新页数据的逻辑
}

const handleContact = () => {
  // 处理商务合作逻辑
  previewVisible.value = false
}
</script>

<style scoped>
.portfolio-container {
  padding: 80px 0;
  background-color: #f9f9f9;
}

.portfolio-header {
  text-align: center;
  margin-bottom: 60px;
}

.portfolio-header h1 {
  font-size: 36px;
  color: #333;
  margin-bottom: 20px;
}

.portfolio-header p {
  font-size: 18px;
  color: #666;
}

.portfolio-content {
  width: 90%;
  margin: 0 auto;
}

.portfolio-tabs {
  margin-bottom: 30px;
}

.portfolio-item {
  margin-bottom: 30px;
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  cursor: pointer;
}

.portfolio-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.portfolio-image {
  position: relative;
  height: 0;
  padding-bottom: 140%;
  overflow: hidden;
}

.portfolio-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
}

.portfolio-item:hover .portfolio-image img {
  transform: scale(1.05);
}

.portfolio-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.3s ease;
}

.portfolio-item:hover .portfolio-overlay {
  opacity: 1;
}

.portfolio-overlay .el-icon {
  color: white;
}

.portfolio-info {
  padding: 20px;
}

.portfolio-info h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.portfolio-meta {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 8px;
}

.portfolio-meta span {
  font-size: 14px;
  color: #999;
  margin-right: 10px;
}

.portfolio-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.portfolio-pagination {
  margin-top: 40px;
  text-align: center;
}

.preview-content {
  display: flex;
  gap: 30px;
}

.preview-video {
  flex: 1;
}

.preview-info {
  flex: 1;
}

.preview-info h3 {
  font-size: 24px;
  margin-bottom: 15px;
  color: #333;
}

.preview-info p {
  font-size: 16px;
  color: #555;
  margin-bottom: 10px;
  line-height: 1.6;
}

.preview-tags {
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 768px) {
  .preview-content {
    flex-direction: column;
  }

  .portfolio-item {
    margin-bottom: 20px;
  }
}
</style>